<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>

<div>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add">
</div>

<table id="tb">
    <tbody>

    <caption>学生信息表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>张三</td>
        <td>23</td>
        <td>男</td>
        <td><a href="JavaScript:void(0);" onclick="del(this);">删除</a></td>
    </tr>

    <!--
         a.onclick = function(){
             del(this);
         }
    -->

    <tr>
        <td>李四</td>
        <td>24</td>
        <td>男</td>
        <td><a href="JavaScript:void(0);" onclick="del(this);">删除</a></td>
    </tr>

    </tbody>

</table>
</body>
<script>
    //当单击"添加"按钮，需要向table中添加tr,tr中的内容来自输入框
    //1.明确操作目标--添加按钮
    //2.明确操作行为 --单机事件
    //3.编写代码实现功能
    document.getElementById("add").onclick=function(){
        //获取框中的值
        let nameVal=document.getElementById("name").value;
        let ageVal=document.getElementById("age").value;
        let genderVal=document.getElementById("gender").value;
        document.getElementById("tb").innerHTML+="<tr>\n"+
                "<td>"+nameVal+"</td>\n"+
                "<td>"+ageVal+"</td>\n"+
                "<td>"+genderVal+"</td>\n"+
                "<td><a href=\"JavaScript:void(0);\" onclick='del(this);'>删除</a></td>\n"+
                "</tr>";
    }
    //删除
    function del(obj){
        //获取当前带点击的a标签(obj代表当前点击的那个a标签)
        let trEle=obj.parentNode.parentNode;
        let parentEle=trEle.parentNode;
        parentEle.removeChild(trEle);
    }

</script>
</html>